<template>
    <div class="flex-main">
        <div class="flex-body">
            <!-- banner广告轮播组件 -->
            <bannerSlider :swiperSlides="swiperSlides"></bannerSlider>
            
            <menu-tab :menuTab="menuTab" @setMenu="setMenu"></menu-tab>

            <div>
                <p class="m-title">
                    <img src="@/assets/images/icon1@2x.png" alt="">
                    热销拼团
                    <img src="@/assets/images/icon1@2x.png" alt="">
                </p>
                <bannerSlider :swiperSlides="hotSpellingList"></bannerSlider>

                <p class="m-title">
                    <img src="@/assets/images/icon1@2x.png" alt="">
                    拼团
                    <img src="@/assets/images/icon1@2x.png" alt="">
                </p>
                <div class="m-spelling-list">
                    <no-data v-if="spellingList.length<1 && !loading"></no-data>
                    <spelling-item v-else class="m-spelling-item"
                    v-for="(item,index) in spellingList" :key="index" :spelling="item"></spelling-item>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import bannerSlider from '@/model/index/bannerSlider';
import {indexBanner} from '@/api/views';
import {spellingIndex} from '@/api/spelling';
import { log } from 'util';
export default {
    name:'',
    data () {
        return {
            swiperSlides:[],
            menuTab:[{
                icon:require('@/assets/images/collageindex_all@2x.png'),
                text:'全部'
            },{
                icon:require('@/assets/images/collageindex_pro@2x.png'),
                text:'卡项'
            },{
                icon:require('@/assets/images/collageindex_product@2x.png'),
                text:'项目'
            },{
                icon:require('@/assets/images/collageindex_card@2x.png'),
                text:'产品'
            }],
            hotSpellingList:[],
            spellingList:[],
            Type:0,         //1：卡项 2：项目 3：产品 （全部传0或不传）
            loading:true,       //正在加载
        }
    },
    components: {
        bannerSlider,
        menuTab:()=>import('@/model/spelling/menuTab'),
        spellingItem:()=>import('@/model/spelling/spellingItem2'),
    },
    methods:{
        // 获取banner
        getBanner(flag) {
            let that = this;
            indexBanner({flag:flag}).then((result) => {
                that.swiperSlides = result.list;
            }).catch((err) => {
                
            });
        },
        // 获取拼团列表
        getSpellingIndex(IsHot) {       //0是热门1是非热门默认可不传
            let that = this;
            that.loading = true;
            this.$indicator.open('加载中...');
            let param = {
                Type:that.Type,
                IsHot:IsHot,
                page:1,
                list_rows:20,
            }
            spellingIndex(param).then(result=>{
                that.loading = false;
                if(IsHot==0){
                    that.hotSpellingList = result.list.data;
                }else{
                    that.spellingList = result.list.data;
                }
                this.$indicator.close();
            })
        },
        // 选择菜单
        setMenu(data) {
            this.Type = data;       //1：卡项 2：项目 3：产品 （全部传0或不传）
            this.getSpellingIndex(1);
        }
    },
    mounted() {
        this.$indicator.open('加载中...');
        this.getBanner('spelling');
        this.getSpellingIndex(0);
        this.getSpellingIndex(1);
    }
}
</script>
<style lang="less" scoped src="@/less/spelling/spelling.less"></style>

